<template>
	<view style="padding-bottom: 50rpx;">
		<page-head :title="'驾考宝典'" :headtype="2"></page-head>
		<view class="topsticky" :style="'top:'+statusheadheight+'px'">
			<view class="tagcart flex marginAuto">
				<view class="tagcarteach" @click="cartfun(1)">
					<view class="tagcartimage marginAuto">
						<image class="tagcartiicon" v-if="cartype != 1" :src="apifun.serveimg+'dircar1.png'" mode="widthFix"></image>
						<image class="tagcartiicon" v-if="cartype == 1" :src="apifun.serveimg+'dircar1ac.png'" mode="widthFix"></image>
					</view>
					<view class="tagcarttitle" :class="cartype == 1 ? 'tagcarttitleac':''">C1/C2/C3</view>
				</view>
				<view class="tagcarteach" @click="cartfun(2)">
					<view class="tagcartimage marginAuto">
						<image class="tagcartiicon" v-if="cartype != 2" :src="apifun.serveimg+'dircar2.png'" mode="widthFix"></image>
						<image class="tagcartiicon" v-if="cartype == 2" :src="apifun.serveimg+'dircar2ac.png'" mode="widthFix"></image>
					</view>
					<view class="tagcarttitle" :class="cartype == 2 ? 'tagcarttitleac':''">A1/A3/B1</view>
				</view>
				<view class="tagcarteach" @click="cartfun(3)">
					<view class="tagcartimage marginAuto">
						<image class="tagcartiicon" v-if="cartype != 3" :src="apifun.serveimg+'dircar3.png'" mode="widthFix"></image>
						<image class="tagcartiicon" v-if="cartype == 3" :src="apifun.serveimg+'dircar3ac.png'" mode="widthFix"></image>
					</view>
					<view class="tagcarttitle" :class="cartype == 3 ? 'tagcarttitleac':''">D/E/F</view>
				</view>
				<view class="tagcarteach" @click="cartfun(4)">
					<view class="tagcartimage marginAuto">
						<image class="tagcartiicon" v-if="cartype != 4" :src="apifun.serveimg+'dircar4.png'" mode="widthFix"></image>
						<image class="tagcartiicon" v-if="cartype == 4" :src="apifun.serveimg+'dircar4ac.png'" mode="widthFix"></image>
					</view>
					<view class="tagcarttitle" :class="cartype == 4 ? 'tagcarttitleac':''">A2/B2</view>
				</view>
				<!-- <view class="tagcarteach" @click="cartfun(5)">
					<view class="tagcartimage marginAuto">
						<image class="tagcartiicon" v-if="cartype != 5" :src="apifun.serveimg+'dircar5.png'" mode="widthFix"></image>
						<image class="tagcartiicon" v-if="cartype == 5" :src="apifun.serveimg+'dircar5ac.png'" mode="widthFix"></image>
					</view>
					<view class="tagcarttitle" :class="cartype == 5 ? 'tagcarttitleac':''">C6</view>
				</view> -->
			</view>
			<view class="subject flex">
				<view class="subjecteach" :class="subject == 1 ? 'acsubject':''" @click="subjectfun(1)">
					<view class="subjecteachtxt">科一</view>
					<view style="margin-left:50rpx;margin-top:5rpx;">
						<uv-icon name="arrow-up-fill" size="20" :color="subject == 1 ? '#1686F8':'#ffffff'"></uv-icon>
					</view>
				</view>
				<view class="subjecteach" :class="subject == 2 ? 'acsubject':''" @click="subjectfun(2)">
					<view class="subjecteachtxt">科二</view>
					<view style="margin-left:50rpx;margin-top:5rpx;">
						<uv-icon  name="arrow-up-fill" size="20" :color="subject == 2 ? '#1686F8':'#ffffff'">></uv-icon>
					</view>
				</view>
				<view class="subjecteach" :class="subject == 3 ? 'acsubject':''" @click="subjectfun(3)">
					<view class="subjecteachtxt">科三</view>
					<view style="margin-left:50rpx;margin-top:5rpx;">
						<uv-icon name="arrow-up-fill" size="20" :color="subject == 3 ? '#1686F8':'#ffffff'">></uv-icon>
					</view>
				</view>
				<view class="subjecteach" :class="subject == 4 ? 'acsubject':''" @click="subjectfun(4)">
					<view class="subjecteachtxt">科四</view>
					<view style="margin-left:50rpx;margin-top:5rpx;">
						<uv-icon name="arrow-up-fill" size="20" :color="subject == 4 ? '#1686F8':'#ffffff'">></uv-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="grade marginAuto" v-if="subject == 1 || subject == 4">
			<view class="gradet flex marginAuto">
				<view class="gradeteach">
					<view class="gradeteachfen">{{ datas.max_score || 0 }}<text style="font-size:24rpx;">分</text> </view>
					<view class="gradeteachtitle">最高分</view>
				</view>
				<view class="gradeteach">
					<view class="gradeteachfen">{{ datas.avg_score || 0 }}<text style="font-size:24rpx;">分</text> </view>
					<view class="gradeteachtitle">平均成绩</view>
				</view>
				<view class="gradeteach">
					<view class="gradeteachfen">{{ datas.pass_ratio || 0 }}<text style="font-size:24rpx;">%</text> </view>
					<view class="gradeteachtitle">通过率</view>
				</view>
			</view>
			<view class="gradeb flex marginAuto">
				<view class="gradebeach mainBg baiColor" @click="examinationmnfun()">开始模拟考试</view>
				<view class="gradebeach mainColor" @click="historycjfun()">查看历史成绩</view>
			</view>
		</view>
		<view class="navtype flex marginAuto">
			<view class="navtypeeach" @click="apifun.navigate('/pages/driving/rule','km='+subject)">
				<view class="navtypeeachimg marginAuto">
					<image :src="apifun.serveimg+'diricon1.png'" mode=""></image>
				</view>
				<view class="navtypeeachtxt">考试规则</view>
			</view>
			<view class="navtypeeach" @click="apifun.navigate('/pages/driving/flow','km='+subject)">
				<view class="navtypeeachimg marginAuto">
					<image :src="apifun.serveimg+'diricon2.png'" mode=""></image>
				</view>
				<view class="navtypeeachtxt">考试流程</view>
			</view>
			<view class="navtypeeach" @click="apifun.navigate('/pages/driving/standard','km='+subject)">
				<view class="navtypeeachimg marginAuto">
					<image :src="apifun.serveimg+'diricon3.png'" mode=""></image>
				</view>
				<view class="navtypeeachtxt">考试标准</view>
			</view>
			<view class="navtypeeach" @click="apifun.navigate('/pages/driving/gist','km='+subject)">
				<view class="navtypeeachimg marginAuto">
					<image :src="apifun.serveimg+'diricon4.png'" mode=""></image>
				</view>
				<view class="navtypeeachtxt">考试要点</view>
			</view>
		</view>
		<view class="conn" v-if="subject == 1 || subject == 4">
			<view class="connname marginAuto">日常练习</view>
			<view class="connmain marginAuto flex">
				<view class="connmeach" @click="lxksfun(1)">
					<view class="conncard">
						<image class="conncardbg" :src="apifun.serveimg+'diriconcardbg1.png'" mode=""></image>
						<view class="conncardtitle">顺序练习</view>
						<view class="conncardnum">
							<text style="color:#333333;font-size:36rpx;">{{ lxtsnum1 || 0 }}</text>
							<text style="color:#666666;font-size:28rpx;">/{{ datas.exercise_num || 0}}</text>
						</view>
					</view>
				</view>
				<view class="connmeach" @click="lxksfun(2)">
					<view class="conncard">
						<image class="conncardbg" :src="apifun.serveimg+'diriconcardbg2.png'" mode=""></image>
						<view class="conncardtitle">错题练习</view>
						<view class="conncardnum">
							<text style="color:#333333;font-size:36rpx;">{{ lxtsnum2 || 0 }}</text>
							<text style="color:#666666;font-size:28rpx;">/{{ datas.error_num || 0 }}</text>
						</view>
					</view>
				</view>
				<view class="connmeach" @click="lxksfun(3)">
					<view class="conncard">
						<image class="conncardbg" :src="apifun.serveimg+'diriconcardbg1.png'" mode=""></image>
						<view class="conncardtitle">收藏题练习</view>
						<view class="conncardnum">
							<text style="color:#333333;font-size:36rpx;">{{ lxtsnum3 || 0 }}</text>
							<text style="color:#666666;font-size:28rpx;">/{{ datas.collect_num || 0 }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="explain">
			<view class="explainhead marginAuto flex" @click="apifun.navigate('/pages/driving/explainxq')">
				<view class="explainheadname">视频讲解难点</view>
				<view class="explainheadall flex">
					<text>更多</text>
					<uv-icon name="arrow-right" size="14" color="#666666"></uv-icon>
				</view>
			</view>
			<view class="explainlist">
				<view class="explainitem flex marginAuto" 
				v-for="(item,index) in explaindata" :key="index"
				@click="videobfun(item,index)">
					<view class="explainitemimg">
						<image :src="apifun.URLimg+item.img" mode=""></image>
					</view>
					<view class="explainitemmsg">
						<view class="explainitemmsg-name ellipsis01">{{ item.node_title }}</view>
						<view class="explainitemmsg-time">{{ item.time }}</view>
						<view class="explainitemmsg-status" style="background: #FFEDED;color:#FC2A2A;" v-if="item.is_study">已学习</view>
						<view class="explainitemmsg-status" style="background:#DBEBFF;color:#0089FB;" v-if="!item.is_study">未学习</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusheadheight: uni.getStorageSync('ClientRectTop') + uni.getStorageSync('ClientRectHeight'),
				apifun:this.apifun,
				cartype:1,
				cartypedata:['C1,C2,C3','A1,A3,B1','D,E,F','A2,B2'],
				subject:1,
				datas:{},
				explaindata:[],
				lxtsnum1:0,
				lxtsnum2:0,
				lxtsnum3:0
			};
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.initData();
			}
			this.lxtsnum1 = uni.getStorageSync('lxtsnum1').lxtsnum || 0;
			this.lxtsnum2 = uni.getStorageSync('lxtsnum2').lxtsnum || 0;
			this.lxtsnum3 = uni.getStorageSync('lxtsnum3').lxtsnum || 0;
		},
		methods: {
			initData(){
				let sendData= {
					type:this.cartypedata[this.cartype-1],
					subject:this.subject
				}
				this.apifun.unirequest('/api/topic/index','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
						this.explaindata = datas.course_list;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			historycjfun(){
				let type = this.cartypedata[this.cartype-1];
				this.apifun.navigate('/pages/driving/historycj','type='+type+'&subject='+this.subject);
			},
			examinationmnfun(){
				let type = this.cartypedata[this.cartype-1];
				this.apifun.navigate('/pages/driving/examinationmn','type='+type+'&subject='+this.subject);
			},
			videobfun(item,index){
				uni.setStorageSync('videourl',item.video);
				setTimeout(()=>{
					if(item.video){
						this.apifun.navigate('/pages/driving/videob','courseid='+item.id)
					}
				},300)
			},
			lxksfun(ttype){
				if(ttype == 1){
					uni.setStorageSync('lxtsallnum',this.datas.exercise_num)
				}else if(ttype == 2){
					uni.setStorageSync('lxtsallnum',this.datas.error_num)
				}else if(ttype == 3){
					uni.setStorageSync('lxtsallnum',this.datas.collect_num)
				};
				let type = this.cartypedata[this.cartype-1];
				this.apifun.navigate('/pages/driving/expaperlx','type='+type+'&subject='+this.subject+'&ttype='+ttype);
			},
			cartfun(type){  // 车类型
				this.cartype = type;
				this.initData()
			},
			subjectfun(type){  // 科目
				this.subject = type;
				if(type == 1 || type == 4){
					this.initData()
				}
			}
		},
	};
</script>

<style scoped lang="scss">
	.topsticky{
		position: sticky;
		width: 100%;
		z-index: 100;
		background: #fff;
	}
	// 车类型
	.tagcart{
		width:96%;
		padding:20rpx 2%;
		background:#fff;
		justify-content: space-between;
		.tagcarteach{
			width:20%;
			.tagcartimage{
				width: 60rpx;
				height: 60rpx;
				.tagcartiicon{
					width:100%;
					height:100%;
				}
			}
			.tagcarttitle{
				text-align: center;
				font-size: 20rpx;
				color:#666666;
				line-height: 50rpx;
			}
			.tagcarttitleac{
				color:#0661FF;
				font-weight: 600;
			}
		}
	}
	// 科目
	.subject{
		width: 90%;
		padding: 10rpx 5% 60rpx;
		justify-content:space-between;
		background:#fff;
		.subjecteach{
			width:150rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border: 1px solid #1686F8;
			border-radius:100rpx;
			.subjecteachtxt{
				color: #1686F8;
				font-size:30rpx;
			}
		}
		.acsubject{
			background:linear-gradient(to bottom,#5694FF,#0661FF);
			.subjecteachtxt{
				color: #ffffff;
			}
		}
	}
	// 成绩
	.grade{
		width: 690rpx;
		background: #fff;
		padding: 30rpx 0;
		margin: 20rpx auto;
		border-radius: 20rpx;
		.gradet{
			width: 100%;
			justify-content: space-around;
			.gradeteach{
				width: 30%;
				.gradeteachfen{
					font-size:40rpx;
					color:#222222;
					line-height:70rpx;
					text-align: center;
				}
				.gradeteachtitle{
					font-size: 24rpx;
					color:#333333;
					text-align: center;
				}
			}
		}
		.gradeb{
			width: 80%;
			padding-top: 40rpx;
			display: flex;
			justify-content: space-between;
			.gradebeach{
				width: 260rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 100rpx;
				text-align: center;
				font-size:30rpx;
				border: 1px solid #1686F8;
			}
		}
	}
	// 考试注意事项
	.navtype{
		width: 690rpx;
		padding:25rpx 0;
		background: #fff;
		border-radius: 20rpx;
		justify-content: space-between;
		margin-top: 20rpx;
		.navtypeeach{
			width: 25%;
			.navtypeeachimg{
				width: 90rpx;
				height: 90rpx;
				margin: 10rpx auto;
				image{
					width: 90rpx;
					height: 90rpx;
				}
			}
			.navtypeeachtxt{
				color: #222222;
				font-size: 30rpx;
				line-height:50rpx;
				text-align: center;
			}
		}
	}
	// 日常联系
	.conn{
		.connname{
			width: 690rpx;
			padding: 30rpx 0 20rpx;
			font-size: 34rpx;
			color: #222222;
			font-weight: 700;
		}
		.connmain{
			width: 690rpx;
			justify-content: space-between;
			.connmeach{
				width: 210rpx;
				.conncard{
					position: relative;
					width: 210rpx;
					height:120rpx;
					.conncardbg{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 0;
						width: 210rpx;
						height:120rpx;
					}
					.conncardtitle{
						position: relative;
						z-index: 10;
						font-size: 28rpx;
						color: #666666;
						padding-left: 20rpx;
						padding-top: 20rpx;
					}
					.conncardnum{
						position: relative;
						z-index: 10;
						padding-left: 20rpx;
					}
				}
			}
			.connmzxlx{
				position: relative;
				width: 230rpx;
				height: 260rpx;
				border-radius: 10rpx;
				background: linear-gradient(to bottom, #FFEBDC,#FFFFFF);
				.connmzxlxrb{
					position: absolute;
					bottom: 20rpx;
					right: 20rpx;
					width: 110rpx;
					height: 110rpx;
				}
				.connmzxlx-title{
					font-size: 30rpx;
					color: #703205;
					padding: 18rpx 0 10rpx 18rpx;
				}
				.connmzxlx-doc{
					color: #666666;
					font-size: 24rpx;
					padding-left: 18rpx;
				}
			}
		}
	}
	// 视频讲解
	.explain{
		.explainhead{
			width: 690rpx;
			padding: 20rpx 0;
			line-height: 50rpx;
			justify-content: space-between;
			.explainheadname{
				color: #222222;
				font-size: 34rpx;
				font-weight: 700;
			}
			.explainheadall{
				color: #666666;
				font-size: 24rpx;
			}
		}
		.explainlist{
			.explainitem{
				width: 670rpx;
				padding: 10rpx;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.explainitemimg{
					width: 230rpx;
					height: 180rpx;
					image{
						width: 230rpx;
						height: 180rpx;
						border-radius: 10rpx;
					}
				}
				.explainitemmsg{
					width: 70%;
					margin-left: 18rpx;
					.explainitemmsg-name{
						color: #222222;
						font-size: 28rpx;
						margin-top: 10rpx;
					}
					.explainitemmsg-time{
						font-size: 24rpx;
						color: #666666;
						padding: 18rpx 0;
					}
					.explainitemmsg-status{
						display: inline-block;
						padding: 10rpx;
						border-radius: 10rpx;
						font-size:24rpx;
					}
				}
			}
		}
	}
</style>